<template>
  <div class="innovate" v-loading="loading">
    <div class="main ">
       <div class="crumbs-box">
          <crumbs oneNav='讲座论坛' :rightFlag='true' ></crumbs>
        </div>
      <div class="main-box  w1200">
          <h1>讲座论坛</h1>
          <div class="content-box clearfix" v-if='newDataList.length>0'>
            <div class="content-box-row" v-for='(item,index) in newDataList' :key='index'>
              <template v-if='item.length == 3'>
                <div class="content-box-sub cur" v-for='(items,sindex) in item' :key='items.articleId' @click="articleId(items)">
                  <div class="content-img-box">
                    <img :src="items.articleImg" alt="">
                  </div>
                  <div class="content-text">
                    <div class="time-box"><span style="color:#bbb;font-size:20px;">{{items.createTime | dateFormatMd}}</span></br>{{items.createTime | dateFormatY}}</div>
                    <div class="msg-box">
                      <h4 class="msg-box-h1" :style='ruturnColor(items.titleColor)'>{{items.title | stringLengthT}}</h4>
                      <p style="font-size:12px;color:#aaa;margin:0 5px;">{{items.introduction | stringLengthC}}</p>
                    </div>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="content-box-sub cur" v-for='(items,sindex) in item' :key='items.articleId' @click="articleId(items)">
                  <div class="content-img-box">
                    <img :src="items.articleImg" alt="">
                  </div>
                  <div class="content-text">
                    <div class="time-box"><span style="color:#bbb;font-size:20px;">{{items.createTime | dateFormatMd}}</span></br>{{items.createTime | dateFormatY}}</div>
                    <div class="msg-box">
                      <h4 class="msg-box-h1" :style='ruturnColor(items.titleColor)'>{{items.title | stringLengthT}}</h4>
                      <p style="font-size:12px;color:#aaa;margin:0 5px;">{{items.introduction | stringLengthC}}</p>
                    </div>
                  </div>
                </div>
                <div class="null" v-for='(items,sindex) in 3-item.length' :key='items'></div>
              </template>
            </div>
          </div>
          <div class='load-button'>
            <el-button type="primary" @click='addDataList()' v-if='buttonFlag'>加载更多+</el-button>
            <p style="color:#bbb;" v-else>已经到底，没有更多数据了！</p>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
  import navs from '../common/nav'
  import foot from '../common/footer'
  import crumbs from '..//common/crumbs'
  export default {
    components:{ navs,foot,crumbs},
    data() {
      return {
        dataList:[],
        newDataList:[],
        articleType:this.$route.query.articleType||'4',
        pageSize:9,
        pageNum:1,
        buttonFlag:true,
        loading:true
      }
    },
    methods: {
      ruturnColor(color){
        return color?`color:${color};`:'color:#000;'
      },
      row(number){
        let row = parseInt(number/3)
        this.remainder = number%3
        return row
      },
      newRow(dataList){
        this.newDataList = []
        for(var i=0;i<dataList.length;i+=3){
              this.newDataList.push(dataList.slice(i,i+3));
          }
          return this.newDataList
      },
      addDataList(){
        this.pageNum +=1
        this.getData()
      },
      async getData(){
        // this.loading = true
        let datalist = await this.API.list({articleType:this.articleType,pageSize:this.pageSize,
          pageNum:this.pageNum})
          let res = datalist.rows
          let data = JSON.parse(JSON.stringify(res))
        this.pushData(data)
        if(datalist.total == this.dataList){
          this.buttonFlag = false
        }else{
          if(res.length < this.pageSize){
            this.buttonFlag = false
          }else{
            this.buttonFlag = true
          }
        }
        this.loading = false
      },
      pushData(res){
        this.dataList = [...this.dataList,...res]
        this.newRow(this.dataList)
      },
       articleId(item) {
         if(item.articleBelongsType == 1) {
          let webUrl = item.webUrl
          window.open(webUrl, '_blank');
        }else if(item.articleBelongsType == 2) {
          let routeUrl = this.$router.resolve({
            path: "/Detailid",
            query: {articleId:item.articleId,navName:'讲座论坛'}
          });
          window.open(routeUrl.href, '_blank');
        }
      }
    },
    mounted() {
      this.getData()
    },
    computed:{
    }
  }
</script>

<style lang="scss">
  .innovate {
    .main {
      // margin-top: 440px;
      .crumbs-box {
        width: 100%;
      }
      .main-box{
        h1{
          width: 100%;
          text-align: center;
          font-size: 24px;
          padding: 45px 0;
        }
        .content-box{
            width: 100%;
            // overflow: hidden;
            // background-color: #cccc;
            // display: flex;
            .content-box-row{
                // display: flex;
                // flex: 3;
               .content-box-sub{
                  float: left;
                  // flex:1;
                  width: 380px;
                  height: 400px;
                  // background-color: pink;
                  margin-right:30px; 
                  margin-bottom: 30px;
                  border-bottom: 2px solid #ccc;
                  padding-bottom: 20px;
                  .content-img-box{
                    width: 100%;
                    height:300px;
                    img{
                      width: 100%;
                      height: 100%;
                    }
                  }
                  .content-text{
                    width: 100%;
                    height: 75px;
                    padding: 8px 0 0 8px;
                    // display: flex;
                    justify-content: space-between;
                    .time-box{
                      width: 107.75px;
                      float: left;
                      border: 1px solid #ddd;
                      border-radius: 5px;
                      padding: 10px 0 10px 15px;
                      margin-top: 10px;
                    }
                    .msg-box{
                      float: left;
                      width: 245.2px;
                      .msg-box-h1{
                        font-weight: 600;
                        margin: 10px 5px;
                        font-size: 14px;
                      }
                    }
                  }
              }
              .content-box-sub:hover{
                border-bottom: 2px solid #3246c4;
                transform: translate(2px,-2px);
                box-shadow: -4px 9px 20px 2px rgba(0,0,0,0.3);
                transition: all .2s;
                .msg-box-h1{
                  color: #3246c4;
                }
              }
              .content-box-sub:last-child{
                margin-right:0px;
              }
              .null{
                 width: 270px;
                  height: 335px;
                  // width: 380px;
                  height: 300px;
                  // background-color: green;
                  margin-right:10px; 
                  margin-bottom: 10px;
              }
            }
         
        }
        .load-button{
          width: 100%;
          text-align: center;
          margin: 25px 0;
        }
      }
    }
  }
</style>